<template>
  <MyDialog title="Search" :submit="onSubmit" >
    <q-card>
      <q-card-section class="q-gutter-y-sm row">
        <q-item-label class="col-4 fal">Stock Code: </q-item-label>
        <q-input
          borderless
          v-model="filterForm.data.stock_code"
          use-input
          input-debounce="0"
          hide-bottom-space
          lazy-rules
          class="col-8 fal input-css"
          :dense="true"
        >
        </q-input>
        <q-item-label class="col-4 fal">Equipment Class: </q-item-label>
        <q-select
          borderless
          v-model="filterForm.data.equipment_class"
          :options="inputOptionStore.data.equipmentClass"
          use-input
          input-debounce="0"
          hide-bottom-space
          lazy-rules
          class="col-8 fal input-css"
          :dense="true"
          @filter="filterEQFn"
        >
        </q-select>

        <q-item-label class="col-4 fal">Level: </q-item-label>
        <q-select
          borderless
          v-model="filterForm.data.level"
          :options="['4','5']"
          use-input
          input-debounce="0"
          hide-bottom-space
          lazy-rules
          class="col-8 fal input-css"
          :dense="true"
        >
        </q-select>

        <q-item-label class="col-4 fal">Location: </q-item-label>
        <q-input
          borderless
          v-model="filterForm.data.location"
          use-input
          input-debounce="0"
          hide-bottom-space
          lazy-rules
          class="col-8 fal input-css"
          :dense="true"
        >
        </q-input>
      </q-card-section>
    </q-card>
  </MyDialog>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from 'vue';
import MyDialog from '../container/MyDialog.vue';
import dateIcon from 'src/assets/style/date.png';
import { HistorySearch } from 'src/services/type';
import { getOrderOpts, getSNbySC } from 'src/services/activityLogService';
import { useInputOption } from 'src/stores/inputOptionStore';

const inputOptionStore = useInputOption()

async function init() {
  await inputOptionStore.init()
  eqStringOptions.value = inputOptionStore.data.equipmentClass
}
init()

const filterForm = reactive<{
  data: HistorySearch;
}>({
  data: {
    stock_code: '',
    equipment_class : '',
    level : '',
    location : '',
    dateFrom: '',
    dateTo: '',
  },
});

const stockCodeStringOptions = ref<string[]>([]);
const stockCodeOpts = ref<string[]>([]);

const eqStringOptions = ref<string[]>([]);


async function initOrderOpts() {
  const res = await getOrderOpts();

  stockCodeStringOptions.value = [...res.stock_codes];
  stockCodeOpts.value = [...res.stock_codes];

}

initOrderOpts();

const emit = defineEmits(['filter']);

function onSubmit() {
  emit('filter', filterForm);
}


function filterSCFn(val: string, update: any) {
  if (val === '') {
    update(() => {
      stockCodeOpts.value = [...stockCodeStringOptions.value];
    });
    return;
  }

  update(() => {
    const needle = val.toLowerCase();
    stockCodeOpts.value = stockCodeStringOptions.value.filter(
      (v: string) => v.toLowerCase().indexOf(needle) > -1
    );
  });
}

function filterEQFn(val: string, update: any) {
  if (val === '') {
    update(() => {
      inputOptionStore.data.equipmentClass = [...eqStringOptions.value];
    });
    return;
  }

  update(() => {
    const needle = val.toLowerCase();
    inputOptionStore.data.equipmentClass = eqStringOptions.value.filter(
      (v: string) => v.toLowerCase().indexOf(needle) > -1
    );
  });
}
</script>
